<!-- 出库申请 -->
<template>
  <view class="outboundApplication">
    <view class="top">
      <van-cell-group>
        <my-picker
          :form="form"
          name="type_name"
          @click-input="changeFormType"
          :columns="outBoundTypeList"
          value-key="type_name"
          label="出库类型："
          placeholder="请选择出库类型"
          :disabled="isUpdate"
        ></my-picker>
        <van-field
          @input="changeFormData"
          data-name="purchase_reason"
          :value="form.purchase_reason"
          clearable
          label="出库原因"
          placeholder="请填写出库原因"
        ></van-field>
        <my-calendar
          :form="form"
          name="expect_time"
          @click-input="changeDate"
          label="期望领用日期"
          placeholder="请选择日期"
          :norequired="true"
        ></my-calendar>
      </van-cell-group>
    </view>
    <!-- ==='0' 套餐 -->
    <view v-if="form.outbound_type == '0'">
      <setmeal :list="form.goods_info"></setmeal>
    </view>
    <view class="content" v-else>
      <view class="title flexb">
        <view class="title_left f26">出库商品明细</view>
        <view class="title_right f26 flexb">
          <view style="margin-right: 20rpx">已添加 
            <text>{{ form.goods_info.length ? form.goods_info.length : 0 }}</text>件商品
          </view>
          <view >合计：
            <text>￥{{form.goods_info.reduce((prev, item) => prev * 1 + item.goods_all_price * 1, 0) | number_format(2) }}</text>
          </view>
        </view>
      </view>
      <view class="bigbox">
        <view class="list_box">
          <view class="list_item f28 mb20" v-for="(item, index) in form.goods_info" :key="index">
            <view class="list_item_title flexb">
              <view class="name flexAI f28 fwbold">
                <view class="point br50 mr10"></view>
                <view>品名：{{ item.goods_name }}</view>
              </view>
              <view class="details f24" @click="details(item, index)">
                详情<van-icon name="arrow-down" />
              </view>
            </view>
            <view class="quantity flexb">
              <view class="inventory_quantity">
                <text>库存数量：</text>
                {{ item.goodssnstock }}
              </view>
              <view> 出库数量：{{ item.goods_num }} </view>
            </view>
            <view class="details_subtotal-box flexb">
              <van-button
                type="default"
                class="del"
                @click="delGoodsInfo(index)"
                >删除</van-button>
              <view class="subtotal f28 tc fwbold">
                金额: <text>￥{{ item.goods_all_price }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="btn-style">
        <van-button type="default" class="add" @click="onAddShow">+追加商品</van-button>
        <van-button
          type="default"
          class="del"
          @click="kucunOut"
          v-if="form.outbound_type != 2"
          >库存出库</van-button>
      </view>
    </view>
    <view class="btn-box mt100">
      <van-button color="#999999" type="info" v-if="form.outbound_type != 0"
        >重置</van-button >
      <!-- <van-button
        color="#EF9C2B"
        type="info"
        @click="saveToLocal"
        v-if="!form.outbound_sn"
        >暂存</van-button > -->
      <van-button
        color="#62B158"
        type="info"
        @click="enitSubmit"
        v-if="form.outbound_sn"
        >修改</van-button>
      <van-button color="#62B158" type="info" @click="submit" v-else>提交</van-button>
    </view>

    <!-- 弹框 金额保留小数位 | number_format -->
    <my-overlay :show="show" title="添加商品" @close="show = false">
      <view>
        <van-cell-group>
          <my-picker
            :form="addForm"
            name="code_name"
            @click-input="changeName"
            :columns="catarrList"
            value-key="name"
            label="分类"
            placeholder="请选择分类"
          ></my-picker>
          <my-picker
            :disabled="!addForm.catarr"
            :form="addForm"
            name="goods_name"
            @click-input="changeGoodsList"
            :columns="goods_list"
            value-key="goods_name"
            label="商品"
            placeholder="请选择商品"
          ></my-picker>
          <!-- <van-field
            v-if="form.outbound_type == 2"
            :value="addForm.use_type_name"
            name="use_type_name"
            data-name="use_type_name"
            @click-input="pickerShow"
            required
            clearable
            label="是否营养餐"
            placeholder="请选择是否营养餐"
            :disabled="!addForm.goods_sn"
            is-link
            readonly
          ></van-field> -->
          <van-field
            v-if="form.outbound_type == 2"
            :value="addForm.is_nutrition"
            name="is_nutrition"
            data-name="is_nutrition"
            @click-input="pickerShow"
            required
            clearable
            label="是否营养餐"
            placeholder="请选择是否营养餐"
            :disabled="!addForm.goods_sn"
            is-link
            readonly
          ></van-field>
          <van-field
            v-else
            :value="addForm.use_type_name"
            name="use_type_name"
            data-name="use_type_name"
            @click-input="pickerShow"
            required
            clearable
            label="使用类型"
            placeholder="请选择使用类型"
            :disabled="!addForm.goods_sn"
            is-link
            readonly
          ></van-field>
          <van-field
            :value="addForm.unit_name"
            name="unit_name"
            data-name="unit_name"
            @input="changeAddFormData"
            clearable
            label="单位"
            disabled
          ></van-field>
          <van-field
            :value="addForm.goodssnstock"
            name="goodssnstock"
            data-name="goodssnstock"
            @input="changeAddFormData"
            clearable
            label="库存"
            disabled
          ></van-field>
          <van-input
            v-model="addForm.goods_num"
            name="goods_num"
            data-name="goods_num"
            @testnum="changeGoodsNum"
            label="数量"
            placeholder="请填写数量"
          ></van-input>
          <van-field
            :value="addForm.goods_all_price"
            name="goods_all_price"
            @input="changeAddFormData"
            clearable
            label="金额"
            disabled
          ></van-field>
        </van-cell-group>
        <view class="btn_style">
          <van-button
            color="#999999"
            type="primary"
            class="primary"
            @click="overlayReset"
            >重置</van-button>
          <van-button @click="addToList(false)" color="#EF9C2B" type="primary">提交并添加</van-button >
          <van-button @click="addToClose" color="#62B158" type="info">提交并退出</van-button>
        </view>
      </view>
    </my-overlay>

    <van-popup :show="showPicker" position="bottom">
      <!-- :columns="standingList" -->
      <van-picker
      v-if="form.outbound_type == 2"
        show-toolbar
        :columns = "nourishmentList"
        :value-key="value"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      ></van-picker>
      <van-picker
      v-else
        show-toolbar
        :columns = "standingList"
        :value-key="value"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      ></van-picker>
    </van-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isUpdate: false, // true 修改 false 添加
      toggle: true, // true 添加商品  false 出库
      GoodsFlag: false, //禁用的状态
      form: {
        expect_time: "",
        goods_info: [],
        outbound_sn: "", //出库单号
        outbound_type: "", //出库单类型
        // setmealInfo:[], //套餐信息
      },
      addForm: {
        unit_name: "", //单位(弹框添加)
        goodssnstock: "", //库存
        shop_price: "", //金额
        usetype: "", //使用身份的id
        goods_num: "", //数量
        goods_sn: "", //商品id
      },
      outBoundTypeList: [], //出库类型
      dateShow: false,
      show: false, //弹框
      catarrList: [], //分类（弹框）
      // cat_code: "", //分类的id
      goods_list: [], //商品（弹框）
      standingList: ["学生", "老师"],
      nourishmentList:['是','否'],
      showPicker: false,
      menu: [], //套餐修改
    };
  },
  onunload() {
    uni.removeStorageSync("saveDetail");
  },
  onHide() {
    uni.removeStorageSync("saveDetail");
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    if (this.detailData.code_name) {
      this.form.goods_info.splice(this.detailData.index, 1, { ...this.detailData,});
      this.$set(this.form, "goods_info", [...this.form.goods_info]);
    }
  },

  // 监听页面加载，该钩子被调用时
  onLoad(option) {
    let pages = getCurrentPages();
    this.form.outbound_sn = option.outbound_sn;
    this.form.outbound_type = option.outbound_type;
    this.isUpdate = !!option.outbound_sn;
    if (this.form.outbound_sn || this.form.outbound_type) {
      uni.setNavigationBarTitle({
        title: "出库申请(修改)",
      });
      this.getZixuaneditdetail();
    } else {
      uni.setNavigationBarTitle({
        title: "出库申请(添加)",
      });
    }
  },
  methods: {
    /*套餐出库获取数据*/ 
    getGoodInfos(list) {
      console.log(list);
      // this.$set(this.form,'goods_info',[...list])
      // this.form.goods_info = list;
    },
    // 套餐信息列表
    /*修改的列表数据*/ 
    async getZixuaneditdetail() {
      let res = await this.$ajax.getZixuaneditdetail({
        outbound_sn: this.form.outbound_sn,
        outbound_type: this.form.outbound_type,
      });
      if (res.code == 1) {
        // 套餐类型
        if (this.form.outbound_type == "0") {
          this.form.goods_info = res.data.outbound_info.outbound_menu_goods;
        } else {
          this.form.goods_info = res.data.outbound_info.purchasegoodsinfo;
        }
        this.form.purchase_reason = res.data.outbound_info.outbound_reason; //出库原因
        this.form.expect_time = res.data.outbound_info.expect_time; //期望领用时间
        this.form.outbound_type = res.data.outbound_info.outbound_type;
        this.form.type_name = res.data.outbound_info.type_name;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },

    /*修改（编辑）*/
    async enitSubmit() {
      if (this.form.goods_info.length > 0 ) {
        if (this.form.outbound_type == "0") {
          this.menu = this.form.goods_info;
          let res = await this.$ajax.outEditzixuan({
            outbound_sn: this.form.outbound_sn,
            outbound_reason: this.form.purchase_reason,
            expect_time: this.form.expect_time,
            menu: this.menu,
            outbound_type: this.form.outbound_type,
          });
          if (res.code == 1) {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "../outboundManagement/outboundManagement",
              });
            }, 1000);
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        } else {
          let res = await this.$ajax.outEditzixuan({
            outbound_sn: this.form.outbound_sn,
            outbound_reason: this.form.purchase_reason,
            expect_time: this.form.expect_time,
            goods_info: this.form.goods_info,
            outbound_type: this.form.outbound_type,
          });
          if (res.code == 1) {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "../outboundManagement/outboundManagement",
              });
            }, 1000);
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        }
      } else {
        uni.showToast({
          title: "请先完善数据",
          icon: "none",
        });
      }
    },

    /*提交*/ 
    async submit() {
      // this.form.outbound_type!=""  判断type 有值一样的
      if (this.form.outbound_type == "0") {
        // 套餐类型
        if ( this.form.outbound_type=='0' && this.form.goods_info.length > 0) {
          let res = await this.$ajax.outAdd({
            purchase_reason: this.form.purchase_reason,
            expect_time: this.form.expect_time,
            outbound_type: this.form.outbound_type,
            menu: this.form.goods_info,
          });
          if (res.code == 1) {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
            uni.navigateTo({
              url: "../outboundManagement/outboundManagement",
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        } else {
          uni.showToast({
            title: "请先完善数据",
            icon: "none",
          });
        }
      } else {
        if ( this.form.outbound_type  && this.form.goods_info.length > 0 ) {
          let res = await this.$ajax.outAdd(this.form);
          if (res.code == 1) {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
            uni.navigateTo({
              url: "../outboundManagement/outboundManagement",
            });
          } else {
            uni.showToast({
              title: "请先完善数据",
              icon: "none",
            });
          }
        }
      }
   
    },
    /*暂存*/ 
    async saveToLocal() {
      // 套餐
      if (this.form.outbound_type == "0") {
        if (this.form.type_name) {
          let res = await this.$ajax.outTempsaveck({
            purchase_reason: this.form.purchase_reason,
            expect_time: this.form.expect_time,
            outbound_type: this.form.outbound_type,
            menu: this.form.goods_info,
          });
          if (res.code == 1) {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        } else {
          wx.showToast({
            title: "请先完善数据",
            icon: "none",
          });
        }
      } else {
        // 其他类型
        if (this.form.type_name) {
          let res = await this.$ajax.outTempsaveck(this.form);
          if (res.code == 1) {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        } else {
          wx.showToast({
            title: "请先完善数据",
            icon: "none",
          });
        }
      }
      if ( this.form.outbound_type && this.form.purchase_reason && this.form.expect_time &&  this.form.goods_info.length > 0) {
        let res = await this.$ajax.outTempsaveck(this.form);
        if (res.code == 1) {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        } 
      }
    },
    /*删除*/ 
    async delGoodsInfo(index) {
      this.form.goods_info.splice(index, 1);
    },
    /*使用类型显示下拉*/ 
    pickerShow() {
      if (this.addForm.goods_sn) {
        this.showPicker = true;
      } else {
        this.showPicker = false;
      }
    },
    /*详情*/ 
    details(item, index) {
      this.setDetailData({
        ...item,
        index, // 下表
      });
      uni.navigateTo({
        url: "../outboundManagement/outboundApplicationEditor?index=" + index + "&outbound_type=" + this.form.outbound_type,
      });
    },
    /*弹框重置*/ 
    overlayReset() {
      this.addForm = {};
    },

    /*提交并添加*/ 
    addToList(flag) {
      // 如果有数据的数量 在判断其他数据条件
      // 如果没有输入的数量 则表单置空
      if (this.addForm.goods_num != 0) {
        // 判断条件
        if (this.addForm.usetype == 0 || this.addForm.usetype == 1) {
          if ( this.addForm.catarr &&  this.addForm.goods_sn && this.addForm.goods_num ) {
            this.form.goods_info.push(this.addForm);
            this.overlayReset();
            uni.setStorageSync("goods_info", [...this.form.goods_info]); // 暂的
            wx.showToast({
              title: "添加成功",
              icon: "none",
              duration: 1000,
            });
            if (flag) {
              this.show = false;
            }
          } else {
            wx.showToast({
              title: "请先填写必填的数据",
              icon: "none",
              duration: 1000,
            });
          }
        } else {
          wx.showToast({
            title: "请选择使用类型",
            icon: "none",
            duration: 1000,
          });
        }
      } else {
        wx.showToast({
          title: "出库数量不能为 0   ",
          icon: "none",
          duration: 1000,
        });
      }
    },

    /*提交并退出*/ 
    addToClose() {
      this.addToList(true);
    },
    /*库存出库*/ 
    async kucunOut() {
      // this.toggle = false;
      // 不为空判断
      // &&this.form.purchase_reason && this.form.expect_time 出库原因，期望时间非必填
      if ( this.form.type_name ) {
        let res = await this.$ajax.outCreatematerial({
          outbound_type: this.form.outbound_type,
        });
        if (res.code == 1) {
          this.form.goods_info = res.data.stock_detail;
        } else {
          wx.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      } else {
        wx.showToast({
          title: "请先输入对应的数据",
          icon: "none",
        });
      }
    },

    /*追加商品*/ 
    onAddShow() {
      // this.toggle = true;
      // this.form.purchase_reason &&
      //   this.form.expect_time
      // 不为空判断
      if ( this.form.type_name) {
        this.show = true;
        // this.getOutZixuandetailType();
      } else {
        wx.showToast({
          title: "请先输入对应的数据",
          icon: "none",
        });
      }
    },
    /*数量*/ 
    async changeGoodsNum(num) {
      if (this.addForm.goods_num) {
        // 输入的数量 如果大于 库存数量  提示大于库存重量  并且清空输入的数量
        // 如果小于 这正常计算金额信息（调接口）
        if (this.addForm.goods_num * 1 > this.addForm.goodssnstock * 1) {
          this.addForm.goods_num = this.addForm.goodssnstock;
          uni.showToast({
            icon: "none",
            title: "出库数量不能大于库存量",
            duration: 2000,
          });
        }
        let res = await this.$ajax.outGetunit({
          goods_sn: this.addForm.goods_sn, //商品id
          usetype: this.addForm.usetype, //使用类型id
          goods_num: this.addForm.goods_num, //数量
          outbound_type: this.form.outbound_type,
        });
        if (res.code == 1) {
          this.$set(this.addForm, "shop_price", res.shop_price);
          this.$set(this.addForm, "goods_all_price", res.shop_price);
        }
      } else {
        uni.showToast({
          icon: "none",
          title: "请输入数量",
          duration: 2000,
        });
      }
    },
    /*单位，库存*/ 
    async getUnit() {
      var is_nutrition ='0'
      if (this.addForm.is_nutrition == '是') {
        is_nutrition= 1
      }else if(this.addForm.is_nutrition == '否'){
        is_nutrition = '0'
      }
      let res = await this.$ajax.outGetunit({
        goods_sn: this.addForm.goods_sn,
        usetype: this.addForm.usetype,
        outbound_type:this.form.outbound_type, //类型

        // is_nutrition:this.addForm.is_nutrition
        is_nutrition : is_nutrition
      });
      if (res.code == 1) {
        if (res.data == null) {
          this.$set(this.addForm, "unit_name", res.data);
        } else {
          this.$set(this.addForm, "unit_name", res.data);
        }
        this.$set(this.addForm, "goodssnstock", res.stock); //库存
        this.$set(this.addForm, "shop_price", "0"); // 价格清零
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*使用身份*/ 
    onConfirm(event) {
      const { picker, value, index } = event.detail;
      this.addForm.use_type_name = value;
      this.addForm.is_nutrition = value;
      console.log(this.addForm.is_nutrition,'this.addForm.is_nutrition');

      this.showPicker = false;
      this.addForm.usetype = index;
      this.getUnit();
      // console.log(`当前值：${value}, 当前索引：${index}`);
    },

    /*期望送货时间*/ 
    changeDate(key, value) {
      this.$set(this.form, [key], value);
      this.dataShow = true;
    },
    onDateConfirm(data) {
      this.form.expect_time = this.formatDate(data.detail);
      this.dataShow = false;
    },
    onDateClose() {
      this.dataShow = false;
    },

    changeFormData(event) {
      const key = event.target.dataset.name;
      this.form[key] = event.detail;
    },

    /*出库单类型*/ 
    async getOutBoundtype() {
      let res = await this.$ajax.outBoundtype();
      if (res.code == 1) {
        this.outBoundTypeList = res.data;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*获取套餐信息*/ 
    async getSetmealList() {
      let res = await this.$ajax.outZixuandetail({
        outbound_type: this.form.outbound_type,
      });
      if (res.code == 1) {
        this.form.goods_info = res.data.menu;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    async changeFormType(key, value) {
      this.$set(this.form, "outbound_type", value["outbound_type"]); // 提交给后台的 书库类型id
      this.$set(this.form, [key], value["type_name"]);
      // 每次点的时候.清空 出库原因 + 期望送货日期 + 表单信息
      this.$set(this.form, "purchase_reason", ""); //出库原因
      this.$set(this.form, "expect_time", ""); //期望送货日期
      this.$set(this.form, "goods_info", []); //表单信息清空
      // 套餐出库取请求数据
      console.log(this.form.outbound_type,this.form.type_name,'出库类型');
      if (this.form.outbound_type == "0") {
        let res = await this.$ajax.outZixuandetail({
          outbound_type: this.form.outbound_type,
        });
        if (res.code == 1) {
          this.catarrList = res.data.cat_arr; //分类数据列表（添加商品）
          this.form.goods_info = res.data.menu; //套餐信息
          console.log("分类数据列表", this.catarrList);
          // 暂存信息的套餐信息
          if (res.data.temp_save) {
              this.form.purchase_reason = res.data.temp_save.purchase_reason; //备注
              this.form.expect_time = res.data.temp_save.expect_time; //时间
              this.form.goods_info = res.data.temp_save.remarks;
          } else {
            this.form.goods_info = [];
            console.log("没有数据");
          }
        }
      }else{
        let res = await this.$ajax.outZixuandetail({
          outbound_type: this.form.outbound_type,
        });
        if (res.code == 1) {
          this.catarrList = res.data.cat_arr; //分类数据列表（添加商品）
          if (res.data.temp_save) {
              this.form.purchase_reason = res.data.temp_save.purchase_reason; //备注
              this.form.expect_time = res.data.temp_save.expect_time; //时间
              this.form.goods_info = res.data.temp_save.remarks;
          } else {
            this.form.goods_info = [];
            console.log("没有数据");
          }
        }
      }
    },

    changeName(key, value) {
      this.$set(this.addForm, "catarr", value["code"]); //选择的分类id  提交给后台的
      this.$set(this.addForm, [key], value["name"]);
      console.log(this.addForm.catarr,'分类id');

      // 每次点分类时，都要清空 商品 + 使用类型 + 单位 + 库存 + 数量 + 金额
      this.$set(this.addForm, "goods_sn", ""); //商品id
      this.$set(this.addForm, "goods_name", ""); //商品label

      this.$set(this.addForm, "usetype", ""); //使用类型
      this.$set(this.addForm, "use_type_name", ""); //使用类型

      this.$set(this.addForm, "unit_name", ""); //使用单位
      this.$set(this.addForm, "goodssnstock", ""); //库存
      this.$set(this.addForm, "goods_num", ""); //数量
      this.$set(this.addForm, "shop_price", "0"); //金额
      this.$set(this.addForm, "goods_all_price", "0"); //金额

      this.getOutGetgoods( this.addForm.catarr,this.form.outbound_type); //调商品
  
    },
    /*商品（弹框）*/ 
    async getOutGetgoods(cat_code,outbound_type) {
      let res = await this.$ajax.outGetgoods({
        cat_id: cat_code,
        outbound_type:outbound_type
      });
      if (res.code == 1) {
        this.goods_list = res.data;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },

    changeGoodsList(key, value) {
      this.$set(this.addForm, "goods_sn", value["goods_sn"]); // 对应的id 提交给后台的
      this.$set(this.addForm, [key], value["goods_name"]);
      this.addForm.goods_sn = this.addForm.goods_sn;
      // 每次修改商品时  使用类型 + 单位 +库存 + 数量+ 金额 清空
      this.$set(this.addForm, "usetype", ""); //使用类型
      this.$set(this.addForm, "use_type_name", ""); //使用类型

      this.$set(this.addForm, "unit_name", ""); //使用单位
      this.$set(this.addForm, "goodssnstock", ""); //库存
      this.$set(this.addForm, "goods_num", ""); //数量
      this.$set(this.addForm, "shop_price", ""); //金额
    },
  },

  mounted() {
    this.getOutBoundtype(); //出库类型
  },

  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},

  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
};
</script>

<style lang="scss">
.outboundApplication {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  background: rgba(244, 244, 244, 1);

  .top {
    .van-field__label {
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      font-family: SourceHanSansSC-regular;
    }
  }
  .content {
    .title {
      padding: 20rpx 30rpx;

      .title_left {
        color: rgba(153, 153, 153, 1);
        font-size: 26rpx;
        font-family: SourceHanSansSC-regular;
      }

      .title_right {
        color: rgba(153, 153, 153, 1);
        font-family: SourceHanSansSC-regular;

        text {
          color: red;
          font-weight: bold;
        }
      }
    }
    .list_box {
      .list_item {
        width: 100%;
        line-height: 55rpx;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        padding: 20rpx 20rpx;
        font-family: SourceHanSansSC-regular;

        .list_item_title {
          .name {
            color: rgba(16, 16, 16, 1);
            font-family: SourceHanSansSC-bold;

            .point {
              width: 15rpx;
              height: 15rpx;
              background: rgba(98, 177, 88, 1);
            }
          }
          .details {
            color: rgba(46, 136, 238, 1);
            font-family: SourceHanSansSC-regular;
          }
        }
        .quantity {
          border-bottom: 0.5rpx solid #e7e4e4;
          padding-bottom: 20rpx;
        }

        .details_subtotal-box {
          padding-top: 20rpx;
          .van-button {
            width: 120rpx;
            height: 55rpx;
            color: #d12312;
            border: 0.5rpx solid rgba(187, 187, 187, 1);
            border-radius: 60rpx;
            font-size: 24rpx;
          }

          .subtotal {
            background-color: rgba(255, 255, 255, 1);
            color: rgba(209, 35, 18, 1);
            font-family: Arial;
          }
        }
      }
    }
    .btn-style {
      display: flex;
      justify-content: space-evenly;
      margin-top: 172rpx;
      .van-button {
        width: 206rpx;
        height: 60rpx;
        color: #ef9c2b;
        border: 0.5rpx solid rgba(187, 187, 187, 1);
        border-radius: 60rpx;
        font-size: 24rpx;
        line-height: 60rpx;
      }
      .add {
        .van-button {
          color: rgba(98, 177, 88, 1);
        }
      }
    }
  }
  .btn-box {
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 30rpx;
    .van-button {
      width: 200rpx;
      height: 72rpx;
      border-radius: 8rpx;
      color: rgba(255, 255, 255, 1);
      font-size: 28rpx;
      text-align: center;
      font-family: Microsoft Yahei;
    }
  }
  .btn_style {
        display: flex;
        justify-content: space-evenly;
        margin-top: 30rpx;

        .van-button {
          border-radius: 10rpx;
        }
  }

  // // 弹框样式（套餐——查看材料配比弹框样式）
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .block {
      width: 100%;
      height: auto;
      background-color: #fff;
      margin: 0 30rpx;
      border-radius: 16px;
      padding: 30rpx;

      .title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 20rpx 0;

        .title_left {
          color: rgba(16, 16, 16, 1);
          font-size: 36rpx;
          font-weight: bold;
          font-family: SourceHanSansSC-medium;
        }

        .title_right {
          width: 36rpx;
          height: 36rpx;
          border-radius: 50%;
          background: rgba(62, 61, 61, 1);
          text-align: center;
          color: #ffffff;
          line-height: 36rpx;
        }
      }

      
    }
  }
}
</style>